<template>
  <a-modal
    ref="modalRef"
    class="common-modal"
    :class="{
      noPadding
    }"
    :centered="centered"
    :closable="closable"
    :maskClosable="maskClosable"
    :width="width"
    :height="height"
    :style="{
      '--padding': padding,
    }"
    v-model:open="modelOpen"
    :okText="okText"
    :cancelText="cancelText"
    :okButtonProps="okButtonProps"
    :cancelButtonProps="cancelButtonProps"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <slot>
      <div v-if="type === 'tip'" class="modal-content-tip">
<!--        <img src="@/assets/warning.png" alt="" />-->
        <div class="content-tip">
          <div class="text main" v-show="content">{{ content }}</div>
          <div class="text sub" v-show="subContent">{{ subContent }}</div>
        </div>
      </div>
      <template v-else>内容</template>
    </slot>
    <template #title>
      <slot name="title">
        <div ref="modalTitleRef" style="width: 100%">{{ title }}</div>
      </slot>
    </template>
    <template #footer v-if="footer !== void 0">
      <slot name="footer" v-if="slots.footer"></slot>
      <template v-else>{{typeof footer === 'function' ? footer() : footer}}</template>
    </template>
  </a-modal>
</template>
<script setup>
import { computed, ref, useSlots } from "vue";
const slots = useSlots();
// import warningpang from "@/assets/warning.png";

defineProps({
  title: {
    type: String,
    default: "提示",
  },
  width: {
    type: [String, Number],
    default: 736,
  },
  height: {
    type: [String, Number],
    default: null,
  },
  okButtonProps: {
    type: Object,
    default: null,
  },
  cancelButtonProps: {
    type: Object,
    default: null,
  },
  okText: {
    type: String,
    default: "确定",
  },
  cancelText: {
    type: String,
    default: "取消",
  },
  type: {
    type: String,
    default: null,
  },
  content: {
    type: String,
    default: null,
  },
  subContent: {
    type: String,
    default: null,
  },
  noPadding: {
    type: Boolean,
    default: false,
  },
  centered: {
    type: Boolean,
    default: true,
  },
  closable: {
    type: Boolean,
    default: true,
  },
  maskClosable: {
    type: Boolean,
    default: true,
  },
  footer: {
    type: [String, Function],
    default: void 0,
  },
});
const emits = defineEmits(["ok", "cancel"]);
const modelOpen = defineModel("open");
const modalRef = ref(null);
const getModal = () => {
  return modalRef.value;
};
defineExpose({
  getModal,
});
const handleCancel = () => {
  emits("cancel");
};
const handleOk = () => {
  emits("ok");
};
</script>
<style lang="scss" scoped>
.modal-content-tip {
  display: flex;
  align-items: flex-start;
  $margin: 8px;
  > img {
    width: 20px;
    height: 20px;
    margin-right: $margin;
  }
  .content-tip {
    .text {
      text-align: left;
      &.main {
        font-weight: 500;
        font-size: 16px;
        color: #909399;
        line-height: 24px;
        margin-bottom: $margin;
      }
      &.sub {
        font-weight: 400;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.45);
        line-height: 22px;
      }
    }
  }
}
</style>
